const inp = document.querySelector('#inp_pic');
const con = document.querySelector('.pic_container');
let firstSel = null;
inp.addEventListener('change', e => {
	// console.log(e.target.files, e.target.value);
	if (e.target.files[0].type == "image/png" || e.target.files[0].type == "image/jpeg") {
		// const img = document.createElement('img');
		// img.style.width = "300px";
		// img.style.height = "300px";
		// img.src = window.URL.createObjectURL(e.target.files[0]);
		// con.appendChild(img);
		renderPic(window.URL.createObjectURL(e.target.files[0]));
	} else {
		// console.log("请上传正确的图片格式");
	}
});
function renderPic(url) {
	const childs = [];
	for (let i = 0; i < 9; i++) {
		// 也可使用 CSS 变量
		childs.push(document.createElement("p"));
		childs[i].addEventListener('click', handleClick);
		childs[i].dataset.index = i;
		childs[i].style.width = "98px";
		childs[i].style.height = "98px";
		childs[i].style.border = "1px solid";
		childs[i].style.borderColor = "transparent";
		childs[i].style.backgroundImage = `url(${url})`;
		childs[i].style.backgroundSize = "300px 300px";
		childs[i].style.backgroundPosition = `-${i * 100}px -${Math.floor(i / 3) * 100}px`;
		childs[i].style.backgroundClip = "padding-box";
	}
	// 随机数生成函数
	const getRandomRange = (x, y, num) => {
		if (num > 1) {
			let res = [];
			for (let i = x; i <= y; i++) {
				res.push(i);
			}
			let final = [];
			for (let j = 0; j < num; j++) {
				final.push(res.splice(getRandomRange(0, res.length), 1))
			}
			return final;
		}
		return Number(Math.round(Math.random() * (y - x)) + x);
	}
	// 简单洗牌算法
	for (let j = 0; j < childs.length - 1; j++) {
		const e = childs[j];
		let ran = getRandomRange(j + 1, childs.length - 1);
		childs[j] = childs[ran];
		childs[ran] = e;
	}
	// 插入 DOM
	childs.forEach(e => {
		con.appendChild(e);
	});
}
function handleClick(e) {
	console.log(e.target.dataset.index);
	e.target.classList.toggle("select");
	handleSelect(e.target.dataset.index);
}
function handleSelect(cur) {
	let sels = document.querySelectorAll('.select');
	// 选中1个
	if (sels.length == 1) {
		for (let i = 0; i < 9; i++) {
			if ((con.children[i].dataset.index == cur)) {
				firstSel = i;
			}
		}
	} else if (sels.length == 2) {
		// 选中2个
		let tmp = null;
		for (let i = 0; i < 9; i++) {
			if ((con.children[i].dataset.index == cur)) {
				tmp = i;
				console.log(firstSel, tmp);
			}
		}
		// 交换位置 也可修改 style 属性而不是两次插入元素
		if (firstSel < tmp) {
			con.insertBefore(con.children[firstSel], con.children[tmp]);
			con.insertBefore(con.children[tmp], con.children[firstSel]);
			// 清除样式
			con.children[firstSel].classList.remove("select");
			con.children[tmp].classList.remove("select");
		} else {
			con.insertBefore(con.children[firstSel], con.children[tmp]);
			con.insertBefore(con.children[tmp + 1], con.children[firstSel + 1]);
			// 清除样式
			con.children[firstSel].classList.remove("select");
			con.children[tmp].classList.remove("select");
		}

		firstSel = null;
		// 如果按顺序排好了，则获胜
		if (ifWin()) {
			setTimeout(renderWin, 0);
		}
	}
}
function ifWin() {
	for (let i = 0; i < 9; i++) {
		if (con.children[i].dataset.index != i) {
			return false;
		}
	}
	return true;
}
function renderWin() {
	window.alert("你赢了！");
}
function fetchPic(e) {
	let url = ["https://img.paulzzh.com/touhou/random", "https://acg.toubiec.cn/random.php"];
	fetch(url[Math.round(Math.random())])
		.then((resp) => {
			// 把响应体转化为 JSON 格式
			return resp.json();
		})
		.then(data => {
			renderPic(data);
		})
		.catch(function (err) {
			// 错误捕捉
			console.log(JSON.stringify(err));
		});
}